Перейти к основному содержимому

Типография в Web

· 2 мин. чтения

Кодировки как глобальная проблема невольно зацепили и проблему со шрифтами. На данный момент очень сложно сделать на странице текст своим шрифтом так, что-бы шрифт был виден таким же и на других компьютерах.

Согласно CSS2, шрифты можно подгружать в качестве ресурса, впрочем большинство браузеров это игнорирует.

@font-face { font-family: Broken15; font-style: normal; font-weight: normal; src: url('/fonts/BROKEN0.eot'); @font-face { font-family: "Kimberley"; src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");} h1 { font-family: "Kimberley", sans-serif }

Браузерная поддержка​

Решение Microsoft & IE​

Использовать шрифты уже предустановленные в C:WidnowsFonts . Обычные посетители остаются обычными, система у всех только от Microsoft, больше никого не волнует.
Для advanced-вебмастеров специально выпускается WEFT3 конвертор True Type шрифтов (.ttf) в Embedded Open Type (.eot). Впрочем сама программа 1997 года, поэтому прийдётся потрудиться закачивать через ftp созданный eot файл, который к тому же привязан к домену сайта.

Решение от Mozilla ещё в buglist-е.​

Впрочем некогда в далёком 1998, делалась поддержка Portable Font Resource (pfr) от Bitstream который можно было бы использовать так же как и .eot, вот только создать pfr можно лишь купив TrueDoc, увы найти истину - есть поддержка или нет я не смог.

Замена на Flash​

В народе это называется SIFR (Scalable Inman Flash Replacement). Принцип немного закручен - Javascript ищет элементы по тэгам и выставляет поверх flash-слой. Есть упрощённые версии для jquery, sifr lite и тп.

В минусы

  • пропадают свойства элемента типа href, title;
  • Также невозможно отобразить картинку попавшую в такой элемент,
  • Нельзя вызвать javascript event на таком элементе
  • Проблемы со всплывающими adblock опциями в Firefox+plugins

Также как и в предыдуших решениях надо каким-то образом шрифт впихнуть во flash и при необходимости защитить.

Замена на VML/SVG​

Есть несколько библиотек - cufon (поддерживаются .otf-шрифты тоже), typeface (только .ttf)

Серверные решения​

Почему бы не сделать картинку с нужным текстом шрифтом? Берём php с GD-библиотечкой и кидаем динамично в этот скрипт нужную нам строчку, он сам будет читать нужный файл шрифтов и рисовать что нам нужно. Но зачем изобретать велосипед

В минусы

  • неизвестный фон заголовков
  • wrapping-проблемы
  • проблемы с отключенными в браузере картинками
  • простая замена картинками означает отсутсвие аналогов h1 тэго, снижение SEO

PS. Интересные шрифты можно найти на fuelfonts, вот только кириллица редкая.

Читайте также: